<template>
	<view>
		<u-tabs :list="tabsList" :is-scroll="false" :current="tabIndex" @change="tabChange" active-color="#2b85e4"></u-tabs>
		
		<view style="padding-bottom: 100rpx;">
			<view class="product-list" v-if="dataList && dataList.length">
				
				<view class="product" v-for="(item, i) in dataList" :key="i">
					<view class="product-info">
						<view class="item_left">
							<u-lazy-load class="image" :image="item.goods_warehouse.cover_pic" img-mode="widthFix"></u-lazy-load>
						</view>
						<view class="item_right">
							<view style="font-size: 8pt;">ID：{{item.goods_id}}</view>
							<view class="name">
								{{item.goods_warehouse.name}}
							</view>
							<view style="font-size: 8pt;">
								<text class='tags' v-for="(itm,index) in item.cats" :key="index">{{itm}}</text>
								<text class='tags' v-if="item.local_life_type == 1">店内商品</text>
								<text class='tags' v-if="item.local_life_type == 2">购物券商品</text>
								<text class='tags' v-if="item.local_life_type == 3">特价团购</text>
								<text class='tags' v-if="item.local_life_type == 4">引流商品</text>
							</view>
							<view style="display: flex;justify-content: space-between;">
								<view>
									<view v-if="item.local_life_type !== 2">￥{{parseFloat(item.goods.price).toFixed(2)}}</view>
									<view v-else>￥{{parseFloat(item.shopping_price).toFixed(2)}}</view>
								</view>
								
								<view style="font-size: 8pt;display: flex;">
									<view v-if="item.mchGoods.status == 0">未申请</view>
									<view v-if="item.mchGoods.status == 1">审核中</view>
									<view style="color: green;" v-if="item.mchGoods.status == 2">已审核</view>
									<view style="display: flex;align-items: center;color:red" v-if="item.mchGoods.status == 3" @click="showToast(item.mchGoods.remark)">
										<text>已拒绝</text>
										<svg t="1724657738007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6725" width="20" height="20">
											<path d="M577.378 438.916l24.36 15.674-24.36-15.674z m-171.14-41.732c0 15.982 12.972 28.954 28.956 28.954 15.98 0 28.954-12.972 28.954-28.954h-57.91z m77.212 173.724c0 15.984 12.972 28.954 28.954 28.954 15.982 0 28.954-12.97 28.954-28.954h-57.908z m57.908 96.514c0-15.982-12.972-28.954-28.954-28.954-15.982 0-28.954 12.972-28.954 28.954h57.908z m-57.908 38.606c0 15.982 12.972 28.954 28.954 28.954 15.982 0 28.954-12.972 28.954-28.954h-57.908z m-238.274-446.32l14.786 24.94-14.786-24.94z m0 506.584l14.786-24.94-14.786 24.94z m347.45 110.72l-14.746-24.94 14.746 24.94z m-160.444 0l-14.786 24.9 14.786-24.9z m347.45-110.72l14.748 24.9-14.748-24.9z m0-506.584l-14.786 24.94 14.786-24.94z m-187.006-110.72l-14.746 24.94 14.746-24.94z m-160.444 0l-14.786-24.9 14.786 24.9z m128.48 248.196c0 9.65-2.82 18.568-7.644 26.058l48.72 31.348a105.9 105.9 0 0 0 16.832-57.406H560.66z m-96.514 0c0-26.64 21.62-48.258 48.256-48.258V291.02c-58.64 0-106.166 47.524-106.166 106.166h57.91z m48.256-48.258c26.638 0 48.258 21.62 48.258 48.258h57.908c0-58.642-47.524-106.166-106.166-106.166v57.908z m-28.954 202.68v19.302h57.908v-19.302h-57.908z m69.568-128.364c-4.866 7.566-10.926 15.366-18.068 24.244-6.872 8.532-14.902 18.26-22.12 28.182-14.246 19.574-29.38 45.092-29.38 75.938h57.908c0-11.776 5.792-24.708 18.3-41.848 6.138-8.456 12.894-16.64 20.384-25.944 7.22-8.956 15.016-18.878 21.696-29.224l-48.72-31.348z m-69.568 244.18v38.606h57.908V667.42h-57.908zM577.88 173.928l186.966 110.72 29.534-49.84-186.968-110.72-29.532 49.84zM830.9 402.28v221.44h57.908V402.28H830.9z m-66.054 339.072l-186.966 110.72 29.532 49.84 186.968-110.72-29.534-49.84z m-317.916 110.72l-186.968-110.72-29.532 49.84 186.966 110.72 29.534-49.84zM193.91 623.72V402.28H136v221.44h57.908z m66.052-339.072l186.968-110.72-29.534-49.84-186.966 110.72 29.532 49.84zM193.908 402.28c0-48.836 25.402-93.58 66.054-117.632l-29.532-49.84C171.788 269.554 136 333.484 136 402.28h57.908z m66.054 339.072c-40.652-24.052-66.054-68.796-66.054-117.632H136c0 68.796 35.788 132.726 94.43 167.472l29.532-49.84z m317.918 110.72c-40.536 24.052-90.416 24.052-130.95 0l-29.534 49.84c58.758 34.784 131.26 34.784 190.016 0l-29.532-49.84zM830.9 623.72c0 48.836-25.402 93.58-66.054 117.632l29.534 49.84c58.64-34.746 94.428-98.676 94.428-167.472H830.9z m-66.054-339.072c40.652 24.052 66.054 68.796 66.054 117.632h57.908c0-68.796-35.788-132.726-94.428-167.472l-29.534 49.84z m-157.434-160.56c-58.758-34.784-131.26-34.784-190.016 0l29.534 49.84c40.534-24.052 90.414-24.052 130.95 0l29.532-49.84z" fill="#000000" p-id="6726"></path>
										</svg>
									</view>
									
									<view style="margin: 0 10rpx;"> | </view>
									
									
									<view style="color: green;" v-if="item.goods.status == 1">上架中</view>
									<view style="color: red;" v-if="item.goods.status == 0">未上架</view>
								</view>
							</view>
						</view>
					</view>
					<view class="product-ctr">
						<view style="color:#2b85e4;" v-if="item.goods.status == 0 && item.mchGoods.status != 1" @click="productApply(item.goods_id)">上架商品</view>
						<view style="color:red;" v-if="item.goods.status == 1" @click="productStatus(item.goods_id)">下架商品</view>
						<view style="color:#2b85e4;" @click="openUrl('/mch/personalCentre/product/create?id='+item.goods_id)">编辑商品</view>
						<view style="color: red;" @click="productRemove(item.goods_id)">删除商品</view>
					</view>
				</view>
				
				<u-loadmore style="padding: 20rpx 0;" :status="loadStatus" />
			</view>
		</view>
		
		<view class="create-product" @click="openUrl('/mch/personalCentre/product/create')">新增商品</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				tabsList: [
					{name: '全部',value:""},
					{name: '未上架',value:0},
					{name: '上架中',value:1}, 
				],
				tabIndex: 0,
				pagination:{
					total_count: 1,
					page_count: 1,
					pageSize: 10,
					current_page: 1
				},
				searchForm:{
					status:''
				},
				dataList:[],
				loadStatus:'nomore',
				localLifeOptions:[],
			}
		},
		onLoad(opt){
			this.getProductList()
		},
		methods:{
			
			//切换选项卡
			tabChange(index) {
				this.tabIndex = index;
				this.searchForm.status = this.tabsList[index].value ?? -1;
				this.initData();
				this.getProductList()
			},
			
			//获取商品列表
			async getProductList(){
				this.loadStatus = 'loading';
				let { current_page, pageSize } = this.pagination;
				let res = await this.$http.request({
					url: this.$api.moreShop.MchProductList,
					method:'post',
					data:{page: current_page,limit: pageSize,...this.searchForm},
					showLoading:true
				});
				this.loadStatus = 'nomore';
				if(res.code != 0){
					this.$http.toast(res.msg);
					return ;
				}
				let { list, pagination,local_life_options } = res.data;
				this.dataList = this.dataList.concat(list);
				this.pagination = pagination;
				// this.localLifeOptions = local_life_options;
				if (this.pagination.current_page < this.pagination.page_count) {
					this.loadStatus = 'loadmore';
				}
				// console.log(this.dataList,this.localLifeOptions)
			},
			
			//初始化变量
			initData(){
				this.dataList = [];
				this.pagination = {
					total_count: 1,
					page_count: 1,
					pageSize: 20,
					current_page: 1
				};
			},
			
			showToast(msg){
				let content = msg;
				uni.showModal({
					title:'拒绝原因',
					content,
					showCancel:false
				});
			},
			openUrl(url) {
				uni.navigateTo({url})
			},
		
			//申请上架
			async productApply(id){
				let that = this;
				let res = await that.$http.request({
					url:that.$api.moreShop.MchProductApply,
					method:'post',
					data:{goods_id:id},
					showLoading:true
				});
				if(res.code !== 0){
					return that.$http.toast(res.msg);
				}
				that.$http.toast('操作成功~');
				that.initData();
				that.getProductList();
			},
		
			//商品下架
			async productStatus(id){
				let that = this;
				uni.showModal({
					title:'温馨提示',
					content:'您确定要下架该商品吗？重新上架仍需要等待审核，请谨慎操作！',
					success: async function (ret) {
						if (ret.confirm) {
							let res = await that.$http.request({
								url:that.$api.moreShop.MchProductStatus,
								method:'post',
								data:{goods_id:id},
								showLoading:true
							});
							if(res.code !== 0){
								return that.$http.toast(res.msg);
							}
							that.$http.toast('操作成功~');
							that.initData();
							that.getProductList();
						}
					}
				})
			},
		
			//商品删除
			async productRemove(id){
				let that = this;
				uni.showModal({
					title:'温馨提示',
					content:'您确定要删除该商品吗？此操作不可逆，请谨慎操作！',
					success: async function (ret) {
						if (ret.confirm) {
							let res = await that.$http.request({
								url:that.$api.moreShop.MchProductRemove,
								method:'post',
								data:{goods_id:id},
								showLoading:true
							});
							if(res.code !== 0){
								return that.$http.toast(res.msg);
							}
							that.$http.toast('操作成功~');
							that.initData();
							that.getProductList();
						}
					}
				})
			}
		},
		onReachBottom() {
			let { current_page, page_count } = this.pagination;
			if (current_page >= page_count) {
				this.loadStatus = 'nomore';
				return;
			}
			this.pagination.current_page++;
			this.getProductList();
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000)
			}
		}
	}
</script>

<style lang="scss">
	.product-list .product{
		width: 98%;
		margin: 10rpx auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	
	.product-list .product-info{
		display: flex;
		justify-content: space-evenly;
		overflow: hidden;
		align-items: center;
	}
	
	.product-list .item_left {
		width: 25vw;
		height: 25vw;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	// .product-list .item_left uni-image {
	// 	width: 100%;
	// 	display: block;
	// 	height: 100%;
	// }
	
	.product-list .item_right {
		width: 70%;
		height: 25vw;
		padding-left: 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.product-list .name {
		width: 100%;
		font-size: 30rpx;
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.product-list .tags{
		border-radius: 10rpx;
		padding: 4rpx 10rpx;
		color:#da0202;
		margin:0 5rpx;
		border: 1px solid #da0202;
	}
	.product-list .product-ctr{
		margin-top: 20rpx;
		padding: 20rpx 20rpx 0;
		border-top: 4rpx solid #f2f2f2;
		font-size: 8pt;
		display: flex;
		justify-content: space-around;
	}
	
	.create-product{
		width: 100vw;
		position: fixed;
		bottom: 0;
		padding: 20rpx;
		text-align: center;
		background-color: #2b85e4;
		color:#ffffff;
		font-size: 14pt;
		z-index: 99;
	}
</style>